import { Button, Card, Form, Icon, Input, Upload } from 'antd';
import React from 'react';

import { FormComponentProps } from 'antd/es/form';
import { connect, DispatchProp } from 'dva';
import { Link, router } from 'umi';
import { formItemLayout, singlePageFormLayout } from '@/common/layout/form';

import { StoreState } from '@/common/store/store';
import { Advertise } from '../model';

// 表单Title
const FormTitle: React.FC = () => (
  <div>
    <Icon type="plus-square" />
    <span style={{ marginLeft: '5px' }}>添加广告</span>
  </div>
);

const ExtraButton: React.FC = () => (
  <Link to="/marketing/adList">
    <Button>返回</Button>
  </Link>
);

interface SubmitFormProps extends FormComponentProps, DispatchProp {
  loading?: boolean;
}

class SubmitForm extends React.Component<SubmitFormProps> {
  handleSubmit = (e: React.FormEvent) => {
    const { dispatch, form } = this.props;
    e.preventDefault();
    form.validateFieldsAndScroll((err, values) => {
      if (!err && dispatch) {
        dispatch({
          type: 'advertise/submit',
          payload: values,
          callback() {
            router.push({
              pathname: '/marketing/adList',
            });
          },
        });
      }
    });
  };

  normFile = (e: { fileList: any }) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  render() {
    const { form, loading } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Card
        title={<FormTitle />}
        extra={<ExtraButton />}
        style={{
          maxWidth: '750px',
          margin: 'auto',
        }}
        bordered
      >
        <Form layout="horizontal" style={singlePageFormLayout} onSubmit={this.handleSubmit}>
          <Form.Item {...formItemLayout} label="广告名称">
            {getFieldDecorator<Advertise>('name', {
              rules: [
                {
                  required: true,
                  message: '请输入广告名称',
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="广告链接">
            {getFieldDecorator<Advertise>('url', {
              rules: [
                {
                  required: true,
                  message: '请输入广告链接',
                },
              ],
            })(<Input />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="广告图片" help="请选择一张广告图片">
            {getFieldDecorator<Advertise>('pic', {
              valuePropName: 'fileList',
              getValueFromEvent: this.normFile,
              rules: [
                {
                  required: true,
                  message: '请选择一张图片作为分类图标',
                },
              ],
            })(
              <Upload listType="picture">
                <Button type="primary">点击上传</Button>
              </Upload>,
            )}
          </Form.Item>
          <Form.Item wrapperCol={{ span: 24, offset: 5 }}>
            <Button type="primary" loading={loading} htmlType="submit">
              提交
            </Button>
            <Button
              onClick={() => {
                form.resetFields();
              }}
              style={{ marginLeft: 8 }}
            >
              重置
            </Button>
          </Form.Item>
        </Form>
      </Card>
    );
  }
}

const mapStateToProps = (state: StoreState) => ({
  loading: state.loading.models.advertise,
});

export default Form.create<SubmitFormProps>()(connect(mapStateToProps)(SubmitForm));
